<template>
	<view>
		<uni-ec-canvas class="uni-ec-canvas" id="uni-ec-canvas" ref="canvas" canvas-id="mychart-gauge" :ec="ec">
		</uni-ec-canvas>
	</view>
</template>
 
<script>
	import uniEcCanvas from './uni-ec-canvas/uni-ec-canvas.vue'
	import * as echarts from '../component/uni-ec-canvas/echarts.js'
	let chart = null
	export default {
		components: {
			uniEcCanvas
		},
		props: {
			valueData: {
				type: Number,
				// 定义是否必须传
				required: true,
				// 定义默认值
				default: 0
			}
		},
		mounted() {
			this.$refs.canvas.init(this.initChart)
		},
		data() {
			return {
				ec: {
					//是否懒加载, 将 lazyLoad 设为 true 后，需要手动初始化图表
					lazyLoad: true
				},
			}
		},
 
		methods: {
			initChart(canvas, width, height, canvasDpr) {
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				let option = {
				  title : {
				    show:true,
				    text: '充电方式', // \n可以换行
				    x:'50%', // center
				    y: 'center',
				    textAlign: 'center',
				    textStyle: {
				      fontSize: '16',
				      fontStyle: 'normal',
				      fontWeight: '600',
				      lineHeight: '28',
				      color:'#333'
				    },
				  },
				  series: [
				    {
				      type:'pie',
				      radius: ['30%', '40%'],
				      label: {
				        normal: {
				            show: false,
				        },
				        emphasis: {
				            show: true,
				        }
				      },
				      data: [
				          {value: 90, name: '搜索引擎'},
				          {value: 10, name: '直接访问'}
				      ]
				    }
				  ]
				};
				chart.setOption(option)
				return chart
			},
		},
 
	}
</script>
<style>
	.uni-ec-canvas {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}
</style>